<template>
	<view>
		<head-navbar :back="true" class="topBox">
			<view>
				<text>参与记录</text>
			</view>
		</head-navbar>
     <scroll-view scroll-y="true" :style="{height:getTabbarContentHeight + 'px'}" @scrolltolower="loadPage">
		<view class="content" v-for="(item,index) in list">
			<view class="date">{{item.addTime*1000 | formatTime("YMDHMS")}}</view>
			<text class="num">{{item.money}}</text>
			<view class="num1">订单号：{{item.orderId}}</view>
			<text class="num2">{{item.accountNo}}</text>
			<view class="pic" v-if="item.win == 2">
				<image src="../../static/img/face.png"></image>
				<text class="yes">恭喜拼中</text>
			</view>
			<view class="pic" v-if="item.win == 0">
				<image src="../../static/img/faceNow.png"></image>
				<text class="yes">拼团中</text>
			</view>
			<view class="pic" v-if="item.win == 1">
				<image src="../../static/img/faceNo.png"></image>
				<text class="yes" style="color: #949494;">未拼中</text>
			</view>
		</view>
		<u-loadmore color='#949494' :status="status" bg-color="rgba(255,255,255,0)" margin-top='20' margin-bottom='15'
		 @loadmore='laodmore' :loadText="loadText" />
		 </scroll-view>
	</view>
</template>

<script>
	import * as api from '../../api/group/index'
	export default {
		data() {
			return {
				getTabbarContentHeight:0,
				list:[],
				groupBookId:'',
				status: 'loading',
				pageNo:1,
				pageSize:15,
				pages:null,
				loadText: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '努力加载中',
					nomore: '没有更多了哦'
				},
			}
		},
		onLoad(option) {
			this.childUserId = option.childUserId
			this.pageJoinLog()
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.getTabbarContentHeight = res.windowHeight - data.height
					}).exec()
				}
			});
		},
		methods: {
            loadPage() {
				if(this.pageNo <= this.pages ){
					this.pageJoinLog()
				}
            },			
			laodmore() {
				this.status = 'loading'
				this.list = []
				this.pageNo = 1
				this.pageJoinLog()
			},
			pageJoinLog() {
				api.pageJoinLog({
					page: {
						pageSize: this.pageSize,
						pageNo: this.pageNo
					}
				}).then(res => {
					this.pages = res.data.dataBody.pages
					this.pageNo++
					this.list = this.list.concat(res.data.dataBody.records)
					if(this.pageNo > this.pages){
						this.status = 'nomore'
					}
				}).catch(err => {
					this.status = 'loadmore'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 680rpx;
		height: 220rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin-left: 35rpx;
		margin-top: 24rpx;
		position: relative;

		.date {
			padding: 15rpx 0 14rpx 30rpx;
			font-size: 15rpx;
		}

		.num {
			padding-left: 26rpx;
			color: #2B2B2B;
			font-size: 48rpx;
			font-weight: 600;
		}

		.num1 {
			padding-left: 30rpx;
			font-size: 18rpx;
			color: #999999;
			margin-bottom: 15rpx;
		}

		.num2 {
			padding-left: 30rpx;
			font-size: 24rpx;
			color: #2B2B2B;
		}

		.pic {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			image {
				width: 135rpx;
				height: 135rpx;
			}

			.yes {
				font-size: 30rpx;
				color: #FF5B02;
				font-weight: 500;
				text-align: center;
			}
		}
	}
</style>
